<!--
 * @Author: weikang
 * @Description:
 * @Date: 2024-01-03 22:23:51
 * @LastEditTime: 2024-02-25 22:15:18
 * @FilePath: \env-manager-pc\src\views\document\device\detail\model\fanganpeizhi.vue
-->
<script setup lang="ts">
import { ElMessage } from 'element-plus'
import type { VxeTablePropTypes } from 'vxe-table'
import documentApi from '@/api/modules/document'
import type { ScenariosItem, ScenariosPackage } from '@/api/modules/types/document'

const { deviceId } = defineProps({
  deviceId: {
    type: String,
    default: '',
  },
})

const formData = reactive({
  Name: '',
  ID: undefined,
})

const loading = ref(false)

const Scenarios = ref<ScenariosPackage[]>([])
function getData() {
  documentApi.DeviceGetScenarioPackage({
    deviceObjID: deviceId,
  }).then((res) => {
    formData.Name = res.Name
    Scenarios.value = res.Scenarios
  })
}

const currentScenarios = ref<any>([])

function choose(ID: number) {
  if (!ID) {
    currentScenarios.value = []
    return
  }
  const current = Scenarios.value.find(item => item.ID === ID)
  if (current) {
    currentScenarios.value = current.Items
  }
}

const cellStyle: VxeTablePropTypes.CellStyle<ScenariosItem> = ({ row, column }: any) => {
  if (column.field === 'value') {
    if (!row.IsConsistent) {
      return {
        backgroundColor: '#FFC000',
      }
    }
  }
}

function callData() {
  if (!formData.ID) {
    return ElMessage.warning('请选择方案')
  }
  loading.value = true
  documentApi.DeviceCallScenario({
    deviceObjID: deviceId,
    scenarioID: formData.ID,
  }).then((res) => {
    currentScenarios.value = res.Items
    loading.value = false
  }, () => {
    loading.value = false
  })
}

function setData() {
  if (!formData.ID) {
    return ElMessage.warning('请选择方案')
  }
  loading.value = true
  documentApi.DeviceSetScenario({
    deviceObjID: deviceId,
    scenario: {
      ...formData,
      Items: currentScenarios.value,
    },
  }).then(() => {
    loading.value = false
    ElMessage.success('下发成功')
  }, () => {
    loading.value = false
  })
}

getData()
</script>

<template>
  <div>
    <el-card class="box-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span>配置</span>
          <div>
            <el-button type="primary" link :loading="loading" @click="callData">
              召测
            </el-button>
            <el-button type="warning" link :loading="loading" @click="setData">
              下发
            </el-button>
          </div>
        </div>
      </template>
      <el-form v-loading="loading" label-width="150px" label-suffix="：">
        <el-row>
          <el-col :span="12">
            <el-form-item label="方案包">
              <el-input v-model="formData.Name" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="方案选择">
              <el-select v-model="formData.ID" clearable @change="choose">
                <el-option v-for="item in Scenarios" :key="item.ID" :value="item.ID" :label="item.Name" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div>
        <vxe-table :height="500" :edit-config="{ trigger: 'click', mode: 'cell' }" :data="currentScenarios" auto-resize :cell-style="cellStyle">
          <VxeColumn type="seq" title="序号" width="90" />
          <VxeColumn title="编码" field="id" width="90" />
          <VxeColumn title="名称" field="name" width="120" />
          <VxeColumn title="设置值" field="value" :edit-render="{}">
            <template #edit="{ row }">
              <vxe-input v-model="row.value" type="text" />
            </template>
          </VxeColumn>
        </vxe-table>
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.card-header {
  --at-apply: flex flex-justify-between;
}
</style>
